<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点扩散-点闪烁</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
    <style>

 .point_animation{
  background: #ff9900;
  width: 6px;
  height: 6px;
  border: 2px #ff9900 solid;
  border-radius: 50%;
  position: absolute;
 }

 .point_animation p, .point_animation span{
  position: absolute;
  width: 4px;
  height: 4px;
  animation: point_animation 1.5s infinite;
  box-shadow: 0px 0px 1px #ff9900;
  margin: 0px;
  border-radius: 50%;
 }
 .point_animation span{
  animation-delay: 0.8s;
 }
 @keyframes point_animation{
  10% {
  transform: scale(1);
  }
  100% {
  transform: scale(8);
  }
 }

<!-- .css_animation{-->
<!--  height:50px;-->
<!--  width:50px;-->
<!--  border-radius: 25px;-->
<!--  background: rgba(255, 0, 0, 0.9);-->
<!--  transform: scale(0);-->
<!--  animation: mypoint 3s;-->
<!--  animation-iteration-count: infinite;-->
<!-- }-->
<!-- @keyframes mypoint{-->
<!--  to{-->
<!--  transform: scale(1.5);-->
<!--  background: rgba(0, 0, 0, 0);-->
<!--  }-->
<!-- }-->







    </style>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
 var baseLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
  url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
  }),
 });

 var map = new ol.Map({
  layers: [baseLayer],
  view: new ol.View({
  center: [104.5602,32.4070],
  projection: 'EPSG:4326',
  zoom: 4,
  extent: [-180, -90, 180, 90]
  }),
  target: "container",
  interactions:ol.interaction.defaults({
  doubleClickZoom: false
  }),
  controls:ol.control.defaults({
  zoom:false,
  attribution: false,
  }),
 });

 setFlashPoint()
 function setFlashPoint(){
  //第一种样式
  var element = document.createElement("div");
  element.className = "point_animation";
  var p = document.createElement("p");
  var span = document.createElement("span");
  element.appendChild(p);
  element.appendChild(span);
  var point_overlay = new ol.Overlay({
  element: element,
  positioning: 'center-center',
  });
  map.addOverlay(point_overlay);
  point_overlay.setPosition([120,30]);

  //第二种样式
<!--  var ele = document.createElement("div");-->
<!--  ele.className = "css_animation";-->
<!--  var point_overlay2 = new ol.Overlay({-->
<!--  element: ele,-->
<!--  positioning: 'center-center',-->
<!--  });-->
<!--  map.addOverlay(point_overlay2);-->
<!--  point_overlay2.setPosition([110,30]);-->
 }







</script>
</body>
</html>